<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <my-com> </my-com>
    </div>
    <!-- 1.组件把我们的应用拆分成模块
         2.组件可复用
         3.便于团队开发·
    -->

    <!-- 步骤1.学习Vue组件的基本定义方法和使用方法 -->
    <!-- 步骤2.学习在webpack中定义组件和使用方法 -->

    <!-- 定义全局组件 -->
    <!-- 调用Vue.extend()方法，创建组件的结构，
        然后调用Vue.component()方法注册组件
        在vm控制的视图区，使用组件
    -->
    <script src="vue.js"></script>
    <script>
        // 1.使用Vue.extend()创建一个组件对象
        // var com = Vue.extend({
        //     template:'<div id="login">这是login组件</div>'
        // });
        // 2.把这个组件对象注册到Vue身上
        // Vue.component('mycom',com); 
        //第一个参数是注册的组件引用名，必须是字符串，要当做标签名在第三步上使用
        // 第二个参数是你要注册的那个组件的对象名，不能加引号
        // 把前两步合并成一步
        Vue.component('myCom',Vue.extend({
            // 注册组件的时候，注册名使用了驼峰命名法，那么视图区使用这个组件的时候
            // 标签名不能使用驼峰命名法，HTML标签名的不区分大小写，这种情况下，只能在两个单词之间加"-"
            template:'<div id="login">这是login组件</div>'
        }));

        var vm =new Vue({
            el:'#app',
            data:{

            }
        })
    </script>
</body>
</html>